<template>
  <div>
    <div class="top"></div>
    <div class="head">
      <van-nav-bar
        fixed
        title="看过"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="wrap">
      <div class="filmCount">
        <span>共{{cinemaDetailsList.length}}部</span>
        <button @click="btnChange" v-if="btnNum">加载</button>
        <!-- <button @click="btnChange" v-if="!btnNum">55</button> -->
        <!-- <span id="two">编辑</span> -->
      </div>
      <van-divider />
      <div>
        <watched-list 
        v-for="(item,index) in cinemaDetailsList" 
        :key="item.id"
        :select="index"
        :cinema="item"
      ></watched-list>
      </div>
      <div class="support"></div>
    </div>
  </div>
</template>

<script>
import WatchedList from "@/components/watched_list.vue";

export default {
  components: {
    "watched-list": WatchedList,
  },
  data() {
    return {
      btnNum: 1,
      redact: 1,
      hide: parseInt(this.$route.query.isHide),
      cinemaIdList:[],
      cinemaDetailsList:[]
    };
  },
  

  methods: {
    onClickLeft() {
      this.$router.push("/me")
    },
    btnChange() {
      this.btnNum = !this.btnNum;
    },
  },
  mounted () {
    this.axios
        .get(
          `/user/selectSeenMovie/${this.$store.state.userId}`
        )
        .then((res) => {
          for (let i = 0; i < res.data.length-1; i++) {
            this.cinemaIdList[i] = res.data[i].id;
            this.axios.get(`/select/FilmInfoById?id=${this.cinemaIdList[i]}`).then((res)=>{
              console.log("循环axios",res.data.data)
              this.cinemaDetailsList[i]=res.data.data
              console.log("电影数组",this.cinemaDetailsList)
              
            })
          }
          // return this.cinemaDetailsList
        });
  },
};
</script>

<style scoped>
.delete-button {
  height: 100%;
}
.support {
  height: 50px;
}
.wrap {
  margin-top: 45px;
}
.top {
  height: 15px;
}
.filmCount {
  margin-left: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1rem;
  margin-bottom: 5px;
  font-size: 0.8rem;
  color: rgb(164, 165, 167);
}
.filmCount button {
  width: 50px;
  border: 1px;
  border-radius: 13px;
}
.head /deep/ .van-nav-bar .van-icon {
  color: black;
}
.head /deep/ .van-nav-bar .van-nav-bar__text {
  color: black;
}
</style>
